<template>
  <div id="app">
    <Tag :title="title[0]">
      <template #img>
        <img width="300px" src="https://img1.baidu.com/it/u=2409498971,2406527793&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=285" alt="">
      </template>
    </Tag>
    <Tag :title="title[1]">
      <template #anime>
        <ul>
          <li v-for="(i,c) in game" :key="c">{{i}}</li>
        </ul>
      </template>
    </Tag>
    <Tag :title="title[2]">
      <template #lalala="">
        <video width="200px" height="200px" src="./jiajiajia.mp4" autoplay muted></video>
      </template>
    </Tag>
  </div>
</template>

<script>
import Tag from "@/components/Tag";
export default {
  name: "App",
  components:{
    Tag
  },
  data(){
    return{
      title:['美食','游戏','动漫'],
      game:['LOL','DNF','DOTA']
    }
  },
  methods:{

  }

}
</script>

<style scoped>
  #app{
    height: 400px;
    background-color: pink;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .oll{
    height: 300px;
    background-color: yellow;
    color: #122b40;
  }
</style>